{extend name="base" /}
{block name="content"}
<link rel="stylesheet" type="text/css" href="/static/webuploader/webuploader.css" />
<link href="/static/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
<div class="view-product">
	<div class="info-center">
		<div class=" padding-big-tb manage-head">
			<h6 class="padding-left manage-head-con">图片列表 &nbsp;&nbsp;
				<span class="fr margin-large-right padding-top text-small text-normal">刷新：<em class="text-main"><i class="fa fa-refresh" aria-hidden="true"></i></em></span>
			</h6>
		</div>
		<div class="manage-detail">
			<div class="margin-tb manage-detail-con clearfix">
				<form name="setp0" onsubmit="return false;" action="#" method="post" autocomplete="off">
				<div id="filePicker"> <i class="fa fa-upload" aria-hidden="true"></i> 上传图片</div>
				</form>
			</div>
		</div>
		<!-- <div class="info-center-con">
			<div class="coin_attent">
				<p>
					<i class="fa fa-picture-o" aria-hidden="true"></i>  查看大图片
				</p>
				<p>
					<i class="fa fa-files-o" aria-hidden="true"></i>  复制当前图片链接
				</p>
			</div>
		</div> -->
		<div class="offcial-table table-margin clearfix">
			<div class="tr-th clearfix">
				<div class="th w5 text-center">
					缩略图
				</div>
				<div class="th w5 text-center">
					预览
				</div>
				<div class="th w30 text-center">
					图片链接
				</div>
				<div class="th w35 text-center">
					使用备注说明
				</div>
				<div class="th w20 text-center">
					时间
				</div>
				<div class="th w5 text-center">
					操作
				</div>
			</div>
			{empty name='list'}
			<div class="tr non-info show border-bottom-none">
            	<span>没查询到符合条件的记录</span>
            </div>
			{/empty}
			{foreach $list as $key => $val}
			<div class="tr clearfix border-bottom-none {if condition='($key+1)%2==0'}dan{/if}">
				<div class="td w5 padding-big-left">
					<img src="{$val['images_url']}" style="width: 20px; height: 20px;">
				</div>
				<div class="td w5 padding-big-left">
					<a class="fancybox" href="{$val['images_url']}" title="{$val['descs']}">
						<i class="fa fa-picture-o" aria-hidden="true"></i> 
					</a>
				</div>
				<div class="td w30 padding-big-left">
					<input class="width-main input text-a7 h6" type="text" name="descs" datatype="descs" value="{$val['images_url']}" disabled="disabled" id="f{$val['id']}" >
				</div>
				<div class="td w35 text-center text-roseo">
					
					<input class="width-main input text-a7 h6" type="text" name="descs" datatype="descs" value="{$val['descs']}" onblur="changeTableVal('jk_images','id','{$val.id}','descs',this)" >
				</div>
				<div class="td w20 text-center">
					{:date('Y-m-d H:i', $val['create_at'])}
				</div>
				<div class="td w5 padding-big-left">
					<a href="javascript:void(0)" data-url="/admin/images/del" data-id="{$val.id}" onClick="delfun(this)">
						<i class="fa fa-trash-o" aria-hidden="true"></i> 
					</a>
				</div>
			</div>
			{/foreach}
		</div>
	</div>
	<div class="page">
		<div class="show-page padding-big-right">
		{$list->render()}
	</div>
	</div>
</div>
<script type="text/javascript" src="/static/webuploader/webuploader.js"></script>
<script src="/static/plugins/fancybox/jquery.fancybox.js"></script>
<script src="/static/admin/Js/myAjax.js"></script>
<script type="text/javascript">
	layui.use(['layer','form'],function(){
        form = layui.form;
        layer = layui.layer;
        $ = layui.jquery;

    });
       var $list=$("#fileList");   //这几个初始化全局的百度文档上没说明，好蛋疼
       var thumbnailWidth = 100;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档  
       var thumbnailHeight = 100;  
       var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
       auto: true,
        // swf文件路径
       swf: '/static/webuploader/Uploader.swf', //加载swf文件，路径一定要对
        // 文件接收服务端。
        server: '/admin/images/upload',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/'
        }
    });
  //上传完成事件监听
    uploader.on( 'fileQueued', function(file) {
        var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
            $img = $li.find('img');
        // $list为容器jQuery实例
               $list.append( $li );
        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }
            $img.attr( 'src', src );
        }, thumbnailWidth, thumbnailHeight );

    	layer.msg('上传成功', {icon: 1,time: 2000}, function() {
            location.href = location.href;
        });
        
    });
</script>
{/block}